<template>
    <div class="maintain-standard-lib-wrap">
        <el-container>
            <el-aside width="300px" style="padding: 20px;">
                <el-row class="more-btns">
                    <el-col :span="24">
                        <el-button type="primary" @click="dialogNewSetMaintainStandard=true">新增整套维保标准</el-button>
                    </el-col>
                    <el-col :span="24">
                        <el-button type="danger" @click="dialogDeleteMaintainStandard=true">删除整套维保标准</el-button>
                    </el-col>
                    <el-col :span="24">
                        <el-button type="primary" @click="dialogImportMaintainStandard=true">上传新标准</el-button>
                    </el-col>
                    <el-col :span="24">
                        <el-button type="primary" @click="dialogExportMaintainStandard=true">下载标准</el-button>
                    </el-col>
                </el-row>
                <div v-if="loadTree">
                    <el-tree
                        :data="maintenanceStandardList"
                        node-key="id"
                        highlight-current
                        :expand-on-click-node="false"
                        @node-click="handleTreeNodeClick"
                        :props="defaultProps"
                        :current-node-key="selectNodeId">
                    </el-tree>
                </div>

                <!-- <el-collapse v-if="loadTree" accordion v-model="activeMaintainStandardId" @change="handleCollapseChange">
                    <el-collapse-item v-for="item in maintenanceStandardList" :key="item.id" :title="item.name" :name="item.id">
                        <div>
                            <el-tree
                                :data="item.nodes"
                                node-key="id"
                                highlight-current
                                default-expand-all
                                :expand-on-click-node="false"
                                @node-click="handleTreeNodeClick"
                                :props="defaultProps"
                                :current-node-key="item.id == activeMaintainStandardId? selectNodeId : ''">
                            </el-tree>
                        </div>
                    </el-collapse-item>
                </el-collapse> -->
            </el-aside>
            <el-main>
                <el-row type="flex" justify="space-between">
                    <el-form :inline="true" class="demo-form-inline" style="text-align: left;" @submit.native.prevent>
                        <el-form-item>
                            <el-select filterable clearable @change="getTableData(1)" v-model="searchForm.workType" placeholder="请选择维保类型">
                                <el-option
                                    v-for="item in maintenanceTypeOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select filterable clearable @change="getTableData(1)" v-model="searchForm.workPeriod" placeholder="请选择维保周期">
                                <el-option
                                    v-for="item in maintenanceCycleOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="getTableData(1)">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <div class="table-header-wrap">
                        <div class="more-btns">
                            <el-button type="primary" @click="addNewNode">新增单个标准</el-button>
                        </div>
                    </div>
                </el-row>
                <el-table
                    v-loading="loading"
                    :data="tableData"
                    ref="mainTable"
                    style="width: 100%">
                    <el-table-column
                        label="序号"
                        type="index"
                        width="50">
                    </el-table-column>
                    <el-table-column label="消防系统" prop="fireSystemName"></el-table-column>
                    <el-table-column label="资产类别" prop="assetCategoryName"></el-table-column>
                    <el-table-column label="维保类别" prop="workType">
                        <template slot-scope="scope">
                            <p v-if="scope.row.workType == 1">维保巡查</p>
                            <p v-else-if="scope.row.workType == 2">保养</p>
                            <p v-else-if="scope.row.workType == 3">单点测试</p>
                            <p v-else-if="scope.row.workType == 4">联动测试</p>
                            <p v-else>-</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="维保周期" prop="workPeriod">
                        <template slot-scope="scope">
                            <p v-if="scope.row.workPeriod == 1">月</p>
                            <p v-else-if="scope.row.workPeriod == 2">季度</p>
                            <p v-else-if="scope.row.workPeriod == 3">半年</p>
                            <p v-else-if="scope.row.workPeriod == 4">年</p>
                            <p v-else>-</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="作业内容" prop="maintainStandardContent">
                        <template slot-scope="scope">
                            <a v-if="scope.row.maintainStandardContent.length > 0" @click="openMaintainStandardContent(scope.row)">
                                <span v-for="(item, index) in scope.row.maintainStandardContent" :key="index">{{item.workContent}}；</span>
                            </a>
                            <p v-else>-</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="作业标准" prop="workStandard">
                        <template slot-scope="scope">
                            <el-tooltip :content="scope.row.workStandard" placement="top">
                                <p>{{scope.row.workStandard.slice(0, 13)}}</p>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
                            <span class="dividing-line">|</span>
                            <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 50, 100]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </el-main>
        </el-container>
        <!-- 新增整套维保标准 -->
        <el-dialog
            :close-on-click-modal="false"
            title="新建一套维保标准"
            width="600px"
            top='20vh'
            v-if="dialogNewSetMaintainStandard"
            :visible.sync="dialogNewSetMaintainStandard"
            @close="dialogNewSetMaintainStandard = false"
            v-dialogDrag>
            <new-set-maintain-standard :closeDialogFun="closeNewSetMaintainStandard" :maintainStandardOptions="maintenanceStandardList"></new-set-maintain-standard>
        </el-dialog>
        <!-- 删除整套维保标准 -->
        <el-dialog
            :close-on-click-modal="false"
            title="删除整套维保标准"
            width="600px"
            top='20vh'
            v-if="dialogDeleteMaintainStandard"
            :visible.sync="dialogDeleteMaintainStandard"
            @close="dialogDeleteMaintainStandard = false"
            v-dialogDrag>
            <div class="delete-maintain-standard-wrap">
                <el-radio-group v-for="item in maintenanceStandardList" :key="item.id" v-model="deleteMaintenanceStandardId" @change="deleteMaintenanceStandardChange(item)">
                    <el-radio :label="item.id">{{item.name}}</el-radio>
                </el-radio-group>
                <el-row class="verifyidentity-button">
                    <el-button round @click.stop="dialogDeleteMaintainStandard = false">取消</el-button>
                    <el-button type="primary" round @click="deleteMaintenanceStandard">删除</el-button>
                </el-row>
            </div>
        </el-dialog>
        <!-- 上传维保标准 -->
        <el-dialog
            :close-on-click-modal="false"
            title="上传维保标准"
            width="600px"
            top='20vh'
            v-if="dialogImportMaintainStandard"
            :visible.sync="dialogImportMaintainStandard"
            @close="dialogImportMaintainStandard = false"
            v-dialogDrag>
            <import-maintain-standard :closeDialogFun="closeImportMaintainStandard" :maintainStandardOptions="maintenanceStandardList"></import-maintain-standard>
        </el-dialog>
        <!-- 下载维保标准 -->
        <el-dialog
            :close-on-click-modal="false"
            title="下载维保标准"
            width="600px"
            top='20vh'
            v-if="dialogExportMaintainStandard"
            :visible.sync="dialogExportMaintainStandard"
            @close="dialogExportMaintainStandard = false"
            v-dialogDrag>
            <export-maintain-standard :closeDialogFun="closeExportMaintainStandard" :maintainStandardOptions="maintenanceStandardList"></export-maintain-standard>
        </el-dialog>
        <!-- 新增/编辑单个标准信息弹框 -->
        <el-dialog
            :close-on-click-modal="false"
            :title="dialogTitle"
            width="600px"
            top='10vh'
            v-if="dialogNodeInfo"
            :visible.sync="dialogNodeInfo"
            @close="closeMaintainStandardNodeInfo"
            v-dialogDrag>
            <maintain-standard-node-info-form :closeDialogFun="closeMaintainStandardNodeInfo" :oldInfo="selectNodeInfo" :parentId="activeMaintainStandardId"></maintain-standard-node-info-form>
        </el-dialog>
        <!-- 作业内容详情弹框 -->
        <el-dialog
            :close-on-click-modal="false"
            title="作业内容"
            width="600px"
            top='20vh'
            :visible.sync="dialogWorkContentInfo"
            @close="dialogWorkContentInfo = false"
            v-dialogDrag>
            <div v-for="(item, index) in workContentInfo" :key="item.id">
                <p class="work-type-title">{{index+1}}、{{workTypeMap(item.type)}}</p>
                <p class="work-type-content">{{item.workContent}}</p>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getAllMaintainStandard, getMaintainStandardDetailList, delMaintainStandardDetail, delMaintainStandard } from '@/api/maintence'
import maintainStandardNodeInfoForm from './Dialog/MaintainStandardNodeInfoForm'
import newSetMaintainStandard from './Dialog/NewSetMaintainStandard'
import importMaintainStandard from './Dialog/ImportMaintainStandard'
import exportMaintainStandard from './Dialog/ExportMaintainStandard'

export default {
    name: 'MaintainStandardLib',
    components: {
        maintainStandardNodeInfoForm,
        newSetMaintainStandard,
        importMaintainStandard,
        exportMaintainStandard
    },
    data() {
        return {
            loadTree: false,
            loading: false,
            dialogNewSetMaintainStandard: false, // 新建一套标准弹框
            dialogDeleteMaintainStandard: false, // 删除一套标准弹框
            dialogImportMaintainStandard: false, // 上传维保标准弹框
            dialogExportMaintainStandard: false, // 下载维保标准弹框
            dialogWorkContentInfo: false, // 作业内容弹框
            dialogNodeInfo: false,
            dialogTitle: '',
            activeMaintainStandardId: '', // 当前激活的维保标准
            maintenanceStandardList: [], // 所有维保标准
            selectNodeId: '', // 选择的节点id
            deleteMaintenanceStandardId: '', // 选择删除的维保标准id
            deleteMaintenanceStandardName: '', // 选择删除的维保标准Name
            maintenanceObject: {
                fireSystem: '',
                assetCategoryId: ''
            },
            defaultProps: {
                children: 'nodes',
                label: 'name',
                value: 'id'
            },
            // 维保类型
            maintenanceTypeOptions: [
                {
                    id: '',
                    name: '全部维保类型'
                }, {
                    id: 1,
                    name: '维保巡查'
                }, {
                    id: 2,
                    name: '保养'
                }, {
                    id: 3,
                    name: '单点测试'
                }, {
                    id: 4,
                    name: '联动测试'
                }
            ],
            // 维保周期
            maintenanceCycleOptions: [
                {
                    id: '',
                    name: '全部维保周期'
                }, {
                    id: 1,
                    name: '月'
                }, {
                    id: 2,
                    name: '季度'
                }, {
                    id: 3,
                    name: '半年'
                }, {
                    id: 4,
                    name: '年'
                }
            ],
            searchForm: {
                workType: '', // 作业类型
                workPeriod: '', // 作业周期
            },
            tableData: [],
            workContentInfo: [], // 作业内容详情
            selectNodeInfo: {}, // 操作对应节点的数据
            total: 0,
            currentPage: 1,
            pageSize: 10,
        }
    },
    created() {
        let that = this

        // 获取所有维保标准
        that.getMaintainStandardLibTree()
    },
    methods: {
        // 关闭新增整套维保标准弹框
        closeNewSetMaintainStandard(flag) {
            this.dialogNewSetMaintainStandard = false
            if(typeof(flag) !== 'object' && flag) {
                this.getMaintainStandardLibTree(this.maintenanceStandardList.length)
            }
        },
        // 关闭上传新标准弹框
        closeImportMaintainStandard(flag) {
            this.dialogImportMaintainStandard = false
            if(typeof(flag) !== 'object' && flag) {
                this.getMaintainStandardLibTree(this.maintenanceStandardList.length)
            }
        },
        // 关闭下载维保标准弹框
        closeExportMaintainStandard() {
            this.dialogExportMaintainStandard = false
        },
        // 手风琴展开
        // handleCollapseChange(activeNames) {
        //     let that = this
        //     if (activeNames) {
        //         that.activeMaintainStandardId = activeNames
        //         that.getTableData(1)
        //     }
        // },
        getMaintainStandardLibTree(defalutNode) {
            let that = this
            that.loadTree = false
            getAllMaintainStandard().then(res => {
                let arr = res.data
                // 处理维保标准id和子系统id重复问题
                for(let i=0, len=arr.length; i < len; i++) {
                    arr[i].id = 'bz-' + arr[i].id
                }
                that.maintenanceStandardList = arr
                // 默认加载第一个节点
                that.activeMaintainStandardId = defalutNode ? arr[defalutNode].id : arr[0].id
                that.selectNodeId = defalutNode ? arr[defalutNode].id : arr[0].id
                that.loadTree = true
                that.getTableData(1)
            })
        },
        // 树型节点被点击
        handleTreeNodeClick(obj, node, item) {
            let that = this
            let ancestorObj = {}
            // 当前节点的祖先是哪个标准
            let findAncestor = (ele) => {
				if(ele.level == 1 || ele.parent.level == 1) {
                    ancestorObj = ele.parent
				} else {
                    findAncestor(ele.parent)
                }
			}
			// 计算中文名称
			findAncestor(node)
            if(obj.id !== that.selectNodeId || that.activeMaintainStandardId !== ancestorObj.data.id) {
                // 点击的节点id
                that.selectNodeId = obj.id
                if(obj.type == 1) {
                    // 记录系统id和资产类别id
                    that.maintenanceObject.fireSystem = obj.id
                    that.maintenanceObject.assetCategoryId = ''
                    // 选择了不同标准中的子节点，更改当前激活的维保标准
                    that.activeMaintainStandardId = ancestorObj.data.id
                } else if (obj.type == 2) {
                    // 记录系统id和资产类别id
                    that.maintenanceObject.fireSystem = node.parent.data.id || ''
                    that.maintenanceObject.assetCategoryId = obj.id
                    // 选择了不同标准中的子节点，更改当前激活的维保标准
                    that.activeMaintainStandardId = ancestorObj.data.id
                } else {
                    // 选择了维保标准根节点
                    that.activeMaintainStandardId = obj.id
                    that.maintenanceObject.fireSystem = ''
                    that.maintenanceObject.assetCategoryId = ''
                }
                // 渲染列表
                that.getTableData(1)
            }
        },
        getTableData(_pageIndex, _pageSize) {
            if(_pageIndex){
                this.currentPage = _pageIndex
            }
            if(_pageSize){
                this.pageSize = _pageSize
            }
            let that = this
            let parames = {
                maintainStandardId: that.activeMaintainStandardId ? that.activeMaintainStandardId.replace('bz-', '') : '',
                fireSystem: that.maintenanceObject.fireSystem || '',
                categoryId: that.maintenanceObject.assetCategoryId || '',
                workType: that.searchForm.workType || '',
                workPeriod: that.searchForm.workPeriod || '',
                pageIndex: that.currentPage - 1,
                pageSize: that.pageSize
            }
            that.loading = true
            getMaintainStandardDetailList(parames).then(res => {
                let data = res.data
                that.tableData = data
                that.total = res.total
                that.loading = false
            })
        },
        handleSizeChange(pageSize) {
            this.getTableData(1, pageSize)
        },
        handleCurrentChange(currentPage) {
            this.getTableData(currentPage)
        },
        // 新增单个标准
        addNewNode() {
            let that = this
            this.selectNodeInfo = {}
            this.dialogTitle = '新增单个标准'
            this.dialogNodeInfo = true
        },
        // 关闭节点信息弹框
        closeMaintainStandardNodeInfo(flag) {
            this.dialogNodeInfo = false
            if(typeof(flag) !== 'object' && flag) {
                // 刷新列表
                this.getTableData(this.selectNodeInfo.id?'':1)
            }
        },
        // 点击作业内容
        openMaintainStandardContent(row) {
            let that = this
            if(row) {
                that.workContentInfo = row.maintainStandardContent
                // 弹出作业内容
                that.dialogWorkContentInfo = true
            }
        },
        workTypeMap(key) {
            const WORKTYPEMAP = {
                1: '单选型',
                2: '文本型',
                3: '数值型',
                4: '单选+文本型',
                5: '单选+数值型',
                6: '数值+文本型'
            }
            return WORKTYPEMAP[key]
        },
        // 编辑
        handleEdit(row) {
            if(row) {
                this.dialogTitle = '编辑单个标准'
                this.selectNodeInfo = row
                this.dialogNodeInfo = true
            }
        },
        // 删除
        handleDelete(row) {
            // 阻止事件冒泡
            event.stopPropagation()
            let that = this
            if(row) {
                this.$confirm('删除标准后，会影响在用的维保计划。是否仍然删除本条标准？', '提示', {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning',
                    roundButton: true
                }).then(() => {
                    delMaintainStandardDetail({
                        id: row.id
                    }).then(res => {
                        if(res.status === 200) {
                            that.$message({
                                message: '删除成功！',
                                type: 'success'
                            })
                            // 刷新页面
                            that.getMaintainStandardLibTree()
                        } else {
                            that.$message({
                                message: res.info,
                                type: 'warning'
                            })
                        }
                    })
                    // 阻止事件冒泡
                    event.stopPropagation()
                }).catch(() => {

                })     
            }
        },
        deleteMaintenanceStandardChange(obj) {
            this.deleteMaintenanceStandardName = obj.name
        },
        // 删除整套维保标准
        deleteMaintenanceStandard() {
            let that = this
            let id = String(that.deleteMaintenanceStandardId).replace('bz-', '')
            if(id) {
                that.$confirm(`确认删除${that.deleteMaintenanceStandardName}吗？`, '提示', {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning',
                    roundButton: true
                }).then(() => {
                    that.dialogDeleteMaintainStandard = false
                    delMaintainStandard({
                        id: id
                    }).then(res => {
                        if(res.status === 200) {
                            that.deleteMaintenanceStandardId = ''
                            that.deleteMaintenanceStandardName = ''
                            that.$message({
                                message: '删除成功！',
                                type: 'success'
                            })
                            // 刷新页面
                            that.getMaintainStandardLibTree()
                        } else {
                            that.$message({
                                message: res.info,
                                type: 'warning'
                            })
                        }
                    })
                    // 阻止事件冒泡
                    event.stopPropagation()
                }).catch(() => {

                })     
            } else {
                that.$message({
                    message: '请选择要删除的维保标准！',
                    type: 'warning'
                })
            }
        }
    },
    watch: {
        tableData(val, oldVal) {

        }
    }
}
</script>
<style lang="scss">
.maintain-standard-lib-wrap {
    .el-aside {
        .more-btns {
            flex-direction: column;
            text-align: center;
            height: auto;
            .el-col {
                margin-bottom: 10px;
                .el-button {
                    width: 100%;
                }
            }
        }
        .el-collapse-item__header {
            font-size: 16px;
        }
    }
    .table-header-wrap {
        .more-btns {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 20px;
            padding-right: 20px;
        }
    }
    .el-tooltip__popper {
        width: 200px;
    }
    .work-type-content {
        text-indent: 1em;
    }
    .delete-maintain-standard-wrap {
        display: flex;
        flex-direction: column;
        .el-radio-group {
            margin-bottom: 15px;
        }
    }
} 
</style>
